<template>
  <div class="confirmsc">
    <div class="toper">
      <div class="head">
        <div class="title">简报制作</div>
        <div class="desc">半自动化生成或舆情分析报告<i></i></div>
      </div>
      <div class="liuchen">
        <div class="left">
          <step :data='3'></step>
        </div>
        <div class="right">
          <div class="num">
            <b v-text='materialnum()'></b>
            <div class="desc">已选择信息</div>
          </div>
          <div class="edit">
            <div class="generate" @click="nextstep()">生成简报</div>
            <div class="choose" @click="$router.push('/brief/confirmsc')">挑选素材</div>
            <div class="desc"><i>*</i>生成简报后将被删除</div>
          </div>
        </div>
      </div>
    </div>
    <div class="space"></div>
    <div class="name">
      <div class="title">填写简报名称</div>
      <div class="input">
        <input type="text" v-model="briefname">
      </div>
    </div>
    <div class="mould">
      <div class="title">选择简报样式</div>
      <div class="view">
        <div class="item" v-for="(item,index) in tem" :key="index" :class="{active:temIndex == index}" @click="temIndex = index">
          <div class="img"></div>
          <div class="title">{{item.title}}</div>
          <div class="desc">{{item.desc}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import step from './step'
import TendLabel from 'components/common/TendLabel'
let tem = [{title:'网宣版',desc:'适合各地网宣部简报模板'},{title:'党政版',desc:'五角星报头,适合政府及单位的简报模板'},
              {title:'摘要版',desc:'纯信息展示,只阅读重点信息的简报模板'},{title:'经典版',desc:'默认推荐的简报模板'}]
export default {
  name:'confirmsc',
  components: {step,TendLabel},
  data(){
    return{
      tem,
      temIndex:0,
      briefname:''
    }
  },
  mounted(){
    localStorage.temindex&&(this.temIndex = parseInt(localStorage.temindex))
    console.log(this.temIndex)
  },
  methods:{
    nextstep(){
      if(!localStorage.Temporarymaterial){
        this.$message('请选择素材')
        return
      }
      if(!this.briefname.trim()){
        this.$message.error('简报名称不能为空')
        return
      }
      
      this.insertBriefingData()
      localStorage.Temporarymaterial=''
    },
    materialnum(){
      let num = 0
      if(localStorage.Temporarymaterial){
        num = JSON.parse(localStorage.Temporarymaterial).length
      }
      return num
    },
    async insertBriefingData(){
      this.$store.commit('LoadingTrue');
      let arr = JSON.parse(localStorage.Temporarymaterial)
      let res =  await this.$http.post('vrv-monitor-platform-web/briefing/insertBriefingData',{
          doc_ids:arr.join(','),
          briefingName:this.briefname,
          templateNo:this.temIndex+''
      })
      this.$store.commit('Loadingfalse');
      this.$router.push( '/brief/briefprocess/list')
      localStorage.removeItem('temindex');
    }
  }
}
</script>
<style lang="stylus" scoped>
  .toper
    height 250px
    padding 30px
    box-sizing border-box
    >.head
      height 40px
      font-size 0
      border-bottom 1px solid #dcdcdc 
      box-sizing border-box
      .title
        display inline-block
        font-size 1.3rem
        color #555
        font-weight bold
      .desc
        display inline-block
        margin-left 8px
        font-size 0.88rem
        color #999
        i
          display inline-block
          margin-left 8px
          width 14px
          height 14px
          background-image url('img/brief-why.png')
          background-repeat no-repeat
          background-size cover
    .liuchen
      margin-top 38px
      font-size 0
      display flex
      .left
        flex 1
      .right
        width 250px
        font-size 0
        .num
          float left
          b
            display block
            font-size 40px
            color #e75a46
            text-align center
          .desc
            font-size 18px
            color #333
        .edit
          float right
          >div
            width 120px
            height 34px
            color #fff
            background-position 10% 55%
            font-size 12px
            line-height 34px
            text-indent 40px
            background-repeat no-repeat
            cursor pointer
            &.generate
              background-color #e85a47
              background-image url(img/generate.png)
              border-radius 8px
            &.choose
              background-color #e85a47
              background-image url(img/choose.png)
              border-radius 8px
              margin-top 10px
          .desc
            font-size 12px
            color #999
            text-indent 0
            >i
              display inline-block
              color #e85a47
              line-height 34px
  .space
    height 10px
    background #f0f5fb
  .name
    padding 0 30px
    padding-top 15px
    font-size 20px
    color #333
    >.input
      margin-top 15px
      input
        padding 0 15px
        width 398px
        height 34px
        border-radius 3px
        border 1px solid #dcdcdc
        box-sizing border-box
        outline none 
  .mould
    .title
      padding-left 30px
      font-size 20px
      color #333
      margin-top 50px
  .view
    padding 20px 30px
    font-size 0
    .item
      position relative
      display inline-block
      width 260px
      height 245px
      margin-right 28px
      border 1px solid #dcdcdc
      border-radius 5px
      overflow hidden
      cursor pointer
      margin-bottom 28px
      &.active
        border-color #e75a46
        &:after
          position absolute
          top 0
          right 0
          display block
          content "已选择"
          height 28px
          line-height 28px
          width 200px
          background #e75246
          color #fff
          font-size 14px
          text-align center
          transform rotate(45deg) translatex(61px) translateY(-40px)
      >.img
        height 155px
        background url(img/templet.png) no-repeat
        background-size 105%
      .title
        font-size 20px
        color #333
        padding-left 35px
        margin-top 18px
      .desc
        margin-top 18px
        padding-left 35px
        font-size 12px
        color #666
@media screen and (max-width: 1750px)
  .toper 
    .liuchen 
      >.right
        width 230px
@media screen and (max-width: 1500px) 
  .view 
    .item
      width 220px
      height 207px
      >.img
        height 130px
      .title
        font-size 16px
        margin-top 10px
      .desc
        margin-top 10px
        font-size 12px
      


          
        



</style>


